<!DOCTYPE html>
<html lang="en">
<head>
	<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="../css/user_msg.css">

	<title>一级类别管理</title>
</head>
<body>
	<nav class="navbar navbar-light fixed-top bg-white flex-md-nowrap p-0 shadow">
      <img class="navbar-brand col-sm-3 col-md-2 mr-0" src="../images/logo.jpg" height="53px" />
      <ul class="nav px-4">
      	<li class="nav-item">
          <a class="nav-link" href="#">主页</a>
       </li>
        <li class="nav-item">
            <a class="nav-link text-secondary" href="#">|</a>
        </li>
        <li class="nav-item text-nowrap">
          <a class="nav-link" href="#">退出</a>
        </li>
      </ul>
    </nav>
	<div class="container-fluid">
      <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
          <div class="sidebar-sticky">
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link active" href="#" onclick="$('#part-1').show();$('#part-2').hide();">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
                  后台 <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
                  一级菜单管理
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
                 二级菜单管理
                </a>
              </li>
            </ul>
          </div>
        </nav>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
        <div id="part-1">
        	<label for="name">一级菜单名称:</label>
			<input type="text" id="AddName" style="width:100px;" placeholder="">
			<button type="button" class="btn btn-primary btn-sm" id="add" onclick="add();">添加</button>
			<table id="table"></table>
      	</div>
        </main>
      </div>
 	<div class="modal fade" id="ModifyModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                	<h4 class="modal-title">修改信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
				      <form class="form-inline" role="search">
				        <div class="form-group">
				          <div style="display: none;">
					          <label for="name">一级菜单编号:</label>
					          <input type="text" id="id" class="form-control" placeholder="">
				          </div>
				          <label for="name">一级菜单名称:</label>
				          <input type="text" id="name" class="form-control" placeholder="">
				        </div>
				      </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="modifying" onclick="modify();">修改</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    </div>

	<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
	<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
	<!-- bootstraptable -->
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
	<script type="text/javascript">
		$('#table').bootstrapTable({
		    url: '/eshop-project/firstCatelog/loadAll',
		    method: 'get',
		    dataType: "json",
		    sortOrder: "asc",
		    //是否显示分页（*）  
            pagination: true,  
	        //如果设置了分页，首页页码     
	        pageNumber: 1,   
	        //每页的记录行数（*）   
	        pageSize: 10,  
	        //可供选择的每页的行数（*）    
	        pageList: [10, 25, 50, 100],
	        //客户端处理分页    
	        sidePagination: "client",
		    columns: [{
		        field: 'firstCatelogId',
		        title: '一级菜单编号'
		    }, {
		        field: 'firstCatelogName',
		        title: '一级菜单名字'
		    },{
                title: '操作',//标题
                visible: true,//false表示不显示
                formatter:ActionFormatter,
                events:window.ActionEvent = {
                 'click .remove':function (e,value,row,index) {
                        var mymessage=confirm("确定删除吗?");
                        if (mymessage == true) {
                            $.ajax({
			                url: '/eshop-project/firstCatelog/delFirstCatelogById?FirstCatelogID='+row['firstCatelogId'],
			                type: 'POST',
			                cache: false,
			                processData: false,
			                contentType: false,
				            }).done(function(res){
				                alert(res.msg);
				                $('#table').bootstrapTable('refresh');
				            }).fail(function(res){
				                alert("删除失败!请稍后再试！");
				            });
                        }
                    },
                    'click .modify':function (e,value,row,index){
                        $("#ModifyModal").modal('show');
                        $('#id').val(row['firstCatelogId']);
                        $('#name').val(row['firstCatelogName']);
                    }
				}
            }]
		});
		function ActionFormatter(value, row, index){
            return [
                    '<a class="remove" title="Remove" style="display: inline;font-size: 12px;"> 删除 </a>',
                    '<p style="display: inline;">|</p>',
                    '<a class="modify" title="Modify" style="display: inline;font-size: 12px;"> 修改 </a>'
            ].join('');
        }
		function modify(){
			var id=document.getElementById("id").value;
			var name=document.getElementById("name").value;
			if(id != "" && name != ""){
				$.ajax({
                url: '/eshop-project/firstCatelog/updateFirstCatelog?FirstCatelogId='+id+"&FirstCatelogName="+name,
                type: 'POST',
                cache: false,
                processData: false,
                contentType: false,
	            }).done(function(res){
	                alert(res.msg);
	                $("#ModifyModal").modal('hide');
	                $('#table').bootstrapTable('refresh');
	            }).fail(function(res){
	                alert("修改失败!请稍后再试！");
	            });
			}else{
				alert("请填写完整信息");
			}
		}
		function add(){
			var name=document.getElementById("AddName").value;
			if(name != ""){
				$.ajax({
	                url: '/eshop-project/firstCatelog/saveFirstCatelog?FirstCatelogName='+name,
	                type: 'POST',
	                cache: false,
	                processData: false,
	                contentType: false,
		            }).done(function(res){
		                alert(res.msg);
		                $('#table').bootstrapTable('refresh');
		            }).fail(function(res){
		                alert("添加失败!请稍后再试！");
		            });
			}else{
				alert("请填写完整信息");
			}
		}
	</script>
</body>
</html>